<template>
	<view class="cascader-container">
		<!-- 关键词搜索 -->
		<view class="u-p-30">
			<u-search placeholder="关键词搜索" v-model="keyword" @change="keySearch" :show-action="false" shape="square"></u-search>
		</view>
		<!-- 面包屑导航 -->
		<scroll-view scroll-x class="breadcrumb" v-if="selectedPath.length > 0">
			<text v-for="(item, index) in selectedPath" :key="index" class="breadcrumb-item"
				@click="handleBreadcrumb(item,index)">
				<text class="links">{{ item.name }}</text>
				<text class="u-p-l-15 u-p-r-15">
					<u-icon name="arrow-right" class="u-tips-color" v-if="index < selectedPath.length - 1"></u-icon>
				</text>
			</text>
		</scroll-view>

		<!-- 层级列表 -->
		<scroll-view scroll-y class="list-container">
			<view v-for="(item, level) in lists" :key="item.value" class="list-item" @click="handleSelect(item, level)">
				<view class="checkBox" :class="item.isChoose?'check':''" @click.stop="handleCheck(item)">
					<u-icon v-if="item.isChoose" name="checkbox-mark" size="24" class="link" color="#10beca"></u-icon>
				</view>
				<view class="u-flex-1 u-p-l-30"><text class="u-font-32">{{ item.name }}</text></view>
				<view class="right-content">
					<u-loading v-if="item.loading" size="28" color="#999"></u-loading>
					<template v-else>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		// 多选模式prop
		multiple: {
			type: Boolean,
			default: false
		},
		// 增加异步加载方法prop
		loadData: {
			type: Function,
			default: null
		},
		options: Array,
		value: Object
	},
	data() {
		return {
			keyword: '',
			lists: [], // 当前展示的层级列表
			selectedPath: [] // 已选路径
		}
	},
	async mounted () {
		// this.lists = await this.loadData({value:0})
		this.lists = this.options
	},
	methods: {
		// 关键词搜索
		async keySearch(){
			let item = this.selectedPath[this.selectedPath.length - 1]
			this.$set(item, 'key', this.keyword)
			const list = await this.loadData(item)
			// 更新视图
			this.lists = list
		},
		// 选择
		handleCheck(item){
			// 单选逻辑
			if (!this.multiple) {
				// 单选逻辑
				this.lists.forEach(i => this.$set(i, 'isChoose', false))
				this.$set(item, 'isChoose', true)
				this.$emit('input', item)
			} else {
				// 多选逻辑
				const newState = !item.isChoose
				this.$set(item, 'isChoose', newState)
				const selectedItems = this.getSelectedItems()
				this.$emit('input', selectedItems)
			}
			this.$emit('change', item)
		},
		// 递归获取所有选中项（处理异步加载的情况）
		getSelectedItems(list = this.lists) {
			return list.reduce((acc, cur) => {
				if (cur.isChoose) acc.push(cur)
				if (cur.children) acc.push(...this.getSelectedItems(cur.children))
				return acc
			}, [])
		},
		async handleSelect(item, level) {
			// 如果正在加载中则阻止操作
			if (item.loading) return

			// 更新选中路径
			this.selectedPath = this.selectedPath.concat(item)
			
			// 需要异步加载的情况
			try {
				this.$set(item, 'loading', true)
				this.$set(item, 'key', this.keyword)
				this.$set(item, 'isChoose', false)
				const list = await this.loadData(item)

				// this.$set(item, 'isLeaf', children.length === 0)

				// 更新视图
				this.lists = list
				console.log('this.lists:',this.lists)
			} finally {
				this.$set(item, 'loading', false)
			}
		},
		
		async handleBreadcrumb(item,index) {
			// 点击面包屑回退
			this.selectedPath = this.selectedPath.slice(0, index + 1)
			const list = await this.loadData(item)
			
			// this.$set(item, 'isLeaf', children.length === 0)
			
			// 更新视图
			this.lists = list
		}
	}
}
</script>

<style lang="scss" scoped>
.checkBox{
	width: 30rpx;
	height: 30rpx;
	border:1px solid $u-border-color;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4rpx;
	&.check{
		border-color: $u-color-blue;
	}
}
.cascader-container {
	display: flex;
	flex-direction: column;
}

.breadcrumb {
	height: 20px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

.list-container {
	flex: 1;
	width: 100%;
}

.list-item {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	align-items: center;
	// border-bottom: 1px solid #f5f5f5;
}

/* 新增右侧内容样式 */
.right-content {
	display: flex;
	align-items: center;
	margin-left: 15rpx;
}

.links{
	color: $u-color-blue;
	/* border-bottom: 1px solid $u-color-blue; */
}
</style>